const path = require('path')

// 1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', // 指定源文件的存放路径
    filename: './index.html' // 指定生成文件的存放路径

})

// 按需导入,得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 创建
const cleanPugin = new CleanWebpackPlugin()

module.exports = {
    // eval-source-map 仅限在“开发模式”下使用，不建议在”生产模式“下使用
    // devtool:'eval-source-map',
    // mode用来指定构建模式， 可选值 development 和 production
    mode: 'development',
    // 把创建的cleanPugin 插件实例对象， 挂载plugin结点中
    plugins: [htmlPlugin, cleanPugin],
    entry: path.join(__dirname, './src/index.js'),// 打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        // 明确告诉webpack 把生成的bundle.js文件存放到dist目录下的js子目录中
        filename: 'js/bundle.js' // 输出文件的名称
    },
    devServer: {
        open: true, //初次打包完成后，自动打开浏览器
        host: '127.0.0.1',//实时打包所使用的主机地址
        port: 8080 // 实时打包所使用的端口号
    },

    module: { //所有第三方文件模块的匹配规则
        rules: [ // 文件后缀名的匹配规则
            {test: /\.css$/, use:['style-loader', 'css-loader']},

            {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            
            // 如果需要调用loader只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
            {
                test: /\.jpg|png|gif/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 2222,
                        // 明确把打包生成的图片文件，存储到dist 目录下的image 文件夹中
                        outputPath: 'image'
                    }
                }
            },
            //{test: /\.jpg|png|gif/, use: 'url-loader?limit=2222&outputPath=image'},

            // 注意必须使用排除项，因为node_modules目录下的第三方包不需要被打包 ， 因为第三方中的js兼容性，不需要程序员关心
            {test: /\.js$/, use: 'babel-loader', exclude: '/node_modules'},
        ]
    },
    resolve: {
        alias: {
            // 告诉webpakck, 程序员写的代码中， @符号表示src这一层目录
            '@':path.join(__dirname, './src/')
        }
    }

}